<template>
	<view class="page">

		<view class="title">注册/忘记密码</view>
		<view class="input_box"><input type="text" v-model="email" placeholder="请输入请电话号码" /></view>
		<view class="input_box">
			<input type="number" v-model="code" placeholder="请输入验证码" />
			<button @click="getCode">{{codeText}}</button>
		</view>
		<view class="input_box"><input password v-model="password" placeholder="请输入密码" /></view>
		<view class="input_box"><input password v-model="confirmPassword" placeholder="请确认密码" /></view>
		<view class="input_box"><input type="text" v-model="recommendCode" placeholder="推荐码（非必填）" @confirm="onSubmit" />
		</view>
		<view class="protocol_box">
			<view class="select" :class="{active: agree}" @click="agree = !agree"></view>
			我已同意
			<text @click="onPageJump('/pages/user/protocol')">《用户注册协议》</text>
			和
			<text @click="onPageJump('/pages/user/protocol')">《隐私协议》</text>
		</view>
		<view class="btn_box"><button @click="onSubmit">注册</button></view>
	</view>
</template>

<script>
	// import md5 from '@/config/md5';
	import {
		textMessage,
		register
	} from '../appjs/register/register';

	var clear;
	export default {
		data() {
			return {
				//电话（插件中为邮箱）
				email: '',
				// 密码
				password: '',
				//验证码
				code: '',
				//确认密码
				confirmPassword: '',
				// 推荐码
				recommendCode: "",
				//验证码
				codeText: '获取验证码',
				//验证码已发
				readonly: false,
				agree: false,
			};
		},
		//第一次加载
		onLoad(e) {},
		//页面显示
		onShow() {},
		//方法
		methods: {
			onJumpPage(url) {
				uni.navigateTo({
					url: url
				});
			},
			//获取验证码
			getCode() {
				console.log("验证码：", this.code)
				if (this.readonly) {
					uni.showToast({
						title: '验证码已发送',
						icon: 'none'
					});
					return;
				}
				if (this.email) {
					textMessage(this.email).then(data => {
						console.log("返回内容：", data)
					})
				}
				if (!this.email) {
					uni.showToast({
						title: '请输入电话号码',
						icon: 'none'
					});
					return;
				}
				// if (!this.$base.mailRegular.test(this.email)) {
				// 	uni.showToast({
				// 		title: '请输入正确的邮箱',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }

				this.getCodeState();
			},
			//验证码按钮文字状态
			getCodeState() {
				const _this = this;
				this.readonly = true;
				this.codeText = '60S后重新获取';
				var s = 60;
				clear = setInterval(() => {
					s--;
					_this.codeText = s + 'S后重新获取';
					if (s <= 0) {
						clearInterval(clear);
						_this.codeText = '获取验证码';
						_this.readonly = false;
					}
				}, 1000);
			},
			onSubmit() {
				//输出所输入的信息，方便传输到后端
				let that = this;

				console.log("电话号码：", this.email)
				console.log("密码：", this.password)
				console.log("验证码：", this.code)
				console.log("确认密码：", this.confirmPassword)
				if (!this.email) {
					uni.showToast({
						title: '请输入电话号码',
						icon: 'none'
					});
					return;
				}
				// if (!this.$base.mailRegular.test(this.email)) {
				// 	uni.showToast({
				// 		title: '请输入正确的邮箱',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				if (!this.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				if (!this.confirmPassword) {
					uni.showToast({
						title: '请输入确认密码',
						icon: 'none'
					});
					return;
				}
				if (this.confirmPassword != this.password) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					});
					return;
				}
				if (this.email != null && this.password && this.confirmPassword && this.confirmPassword == this.password) {
					register(this.email, this.password, this.code).then(data => {
						console.log("电话号码2：", this.email)
						console.log("密码2：", this.password)
						console.log("验证码2：", this.code)
						console.log("确认密码2：", this.confirmPassword)
						console.log("是否成功：", data)
						if (data) {
							uni.showToast({
								title: "注册成功",
								icon: 'success',
								duration: 1000, // 显示时长，单位毫秒
								success() {
									// 在 showToast 的成功回调中设置延时执行 reLaunch
									setTimeout(() => {
										uni.reLaunch({
											url: "/pages/longin/longin" // 确保路径正确
										});
									}, 2000);
								}
							})
						} else {
							uni.showToast({
								title: "验证码错误！！！！",
								icon: 'success',
							})
						}
					})
				}
				// let httpData = {
				// 	email: this.email,
				// 	code: this.code,
				// 	password: md5(this.password),
				// };
				// if (this.recommendCode) {
				// 	httpData.recommendCode = this.recommendCode;
				// }

			},
			//页面隐藏
			onHide() {},
			//页面卸载
			onUnload() {},
			//页面下来刷新
			onPullDownRefresh() {},
			//页面上拉触底
			onReachBottom() {},
		},
	}
</script>
<style lang="scss" scoped>
	// @import '@/style/mixin.scss';

	.page {
		background-color: #FFF;
		padding: 0 56rpx;
		min-height: 100vh;

		.title {
			padding: 28rpx 0 20rpx 0;
			font-size: 52rpx;
			color: #333333;
		}

		.input_box {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			padding-top: 20rpx;
			border-bottom: 1rpx solid #eeeeee;

			input {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
			}

			button {
				height: 78rpx;
				line-height: 78rpx;
				font-size: 30rpx;
				// color: $themeColor;

				&:active {
					background-color: transparent;
				}
			}
		}

		.btn_box {
			margin-top: 40rpx;

			button {
				font-size: 32rpx;
				// @include theme('btn_bg') color: #fff;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 8rpx;
			}
		}

		.protocol_box {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			font-size: 28rpx;
			color: #333333;

			.select {
				width: 36rpx;
				height: 36rpx;
				// background-image: url("../../static/icon/ic_gender_unselected.png");
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 100% auto;
				margin-right: 15rpx;

				&.active {
					// background-image: url("../../static/icon/ic_agreed.png");
				}
			}

			// >text {
			// 	color: $themeColor;
			// }
		}
	}
</style>